import 'package:flutter/material.dart';
import 'package:smart_shop/pages/cart/index.dart';
import 'package:smart_shop/pages/category/index.dart';
import 'package:smart_shop/pages/home/index.dart';
import 'package:smart_shop/pages/mine/index.dart';

class TabBarPage extends StatefulWidget {
  const TabBarPage({super.key});

  @override
  State<TabBarPage> createState() => _TabBarPageState();
}

class _TabBarPageState extends State<TabBarPage> {
//  当前选中的索引
int activeIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 索引栈
      body:IndexedStack(
        index: activeIndex,
        children: const [
          HomePage(),
          CategoryPage(),
          CartPage(),
          MinePage()
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,//底部导航栏类型
        currentIndex: activeIndex,//当前选中的索引
        selectedItemColor:Colors.red ,
        unselectedItemColor: Colors.grey,
        onTap: (index){
          setState(() {
            activeIndex = index;
          });
        },
       items: [
        BottomNavigationBarItem(icon: Image.asset(
          'tabbar/home.png',
          width: 32,
          height: 32,
        ),
        activeIcon: Image.asset(
          'tabbar/home-active.png',
          width: 32,
          height: 32,
        ),
        label: '首页',
        ),
         BottomNavigationBarItem(icon: Image.asset(
          'tabbar/cate.png',
          width: 32,
          height: 32,
        ),
        activeIcon: Image.asset(
          'tabbar/cate-active.png',
          width: 32,
          height: 32,
        ),
        label: '分类',
        ),
         BottomNavigationBarItem(icon: Image.asset(
          'tabbar/cart.png',
          width: 32,
          height: 32,
        ),
        activeIcon: Image.asset(
          'tabbar/cart-active.png',
          width: 32,
          height: 32,
        ),
        label: '购物车',
        ),
         BottomNavigationBarItem(icon: Image.asset(
          'tabbar/user.png',
          width: 32,
          height: 32,
        ),
        activeIcon: Image.asset(
          'tabbar/user-active.png',
          width: 32,
          height: 32,
        ),
        label: '我的',
        ),
       ],

    ),
    );
  }
}